//默认查询广州
getData("广州")

//绑定tab栏时间
$('.banner li').click(function () {
    $('.banner li').css("color", "#8d8d8d")
    $(this).css("color", "#f5f5f5");
    //查询数据
    getData($(this).text())
})

//绑定搜索时间
$('button').click(function () {
    //清楚li的样式 避免误导
    $('.banner li').css("color", "#8d8d8d")
    //查询数据
    getData($('.search input').val())
})

//获取数据 封装成函数
function getData(city) {
    $.ajax({
        url: "http://api.tianapi.com/tianqi/index?key=7db75f0a8b9e89d93762b622eea1a8f0&city=" + city, // 请求路径
        type: "GET", //请求方式
        data: {}, //请求数据
        //请求成功之后的回调
        success: function (data) {
            var number = data.newslist.length;
            for (i = 0; i < number - 1; i++) {
                $(".fro").children("div").eq(i).children('li').eq(0).text(data.newslist[i].week)
                $(".fro").children("div").eq(i).children('li').eq(1).text('Top：' + data.newslist[i].highest)
                $(".fro").children("div").eq(i).children('li').eq(2).text('low：' + data.newslist[i].lowest)
                $(".fro").children("div").eq(i).children('li').eq(3).text(data.newslist[i].weather)
            }
            //data后台返回的json数据，已经帮你转换成JSON对象
        }, //响应成功后的回调函数
        //表示如果请求响应出现错误，会执行的回调函数
        error: function () {
            alert("出错啦...")
        },
        dataType: "json" //设置接受到的响应数据的格式 text 普通的文本字符串
    });
}